<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-05-06 11:23:18
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-06-05 17:36:11
 * @FilePath: \ken147258.topayClient\src\views\other\system\basic-setting.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container" v-loading="loading">
    <div class="search-container">
      <FormList :initForm="initSearchForm" v-model:formModel="searchForm"></FormList>
    </div>
    <el-card shadow="never" class="table-container">
      <!-- <template #header>
        <el-button type="primary" @click="handleTableBtnClick({}, 'add')"
          >一键清零</el-button
        >
      </template> -->
      <div class="info-container border-[#e6e6e6] border-solid border p-[10px] border-l-[5px] mb-[10px]">
        商户总余额：<span>{{ total_amountCom }}</span> 元 总冻结余额：<span>{{
          statInfo.total_frozen_amount
          }}</span>
        元 总可用余额：<span>{{ statInfo.total_usable_amount }}</span>
      </div>
      <comTable :data="tableDatasCom" :config="tableconfig" :tableHeader="tableHeader"
        @link-click="handleTableBtnClick">
      </comTable>

      <pagination v-if="tableDatasObj.paging.total > 0" v-model:total="tableDatasObj.paging.total"
        v-model:page="tableDatasObj.paging.page" v-model:limit="tableDatasObj.paging.limit" @pagination="handleQuery" />
    </el-card>
    <!-- 弹窗 -->
    <el-dialog v-model="dialog.visible" :title="dialog.title" :width="dialog.width" append-to-body @close="closeDialog"
      @closed="closedDialog">
      <FormList v-if="initDialogForm.initKeys.length" v-model:formRef="formDialogId" v-model:formModel="formDialogModel"
        :initForm="initDialogForm"></FormList>
      <!-- 弹窗底部操作按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleLeftClick">{{
            dialog.leftBtnText
            }}</el-button>
          <el-button @click="handleRightClick">{{ dialog.rightBtnText }}</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogForPayOnOff.visible" :title="dialogForPayOnOff.title" :width="dialogForPayOnOff.width"
      append-to-body @close="dialogForPayOnOff.closeDialog">
      <MerchantFundsDetails v-if="dialogForPayOnOff.visible" :id="dialogForPayOnOff.id" />
      <!-- 弹窗底部操作按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogForPayOnOff.handleRightClick">{{
            dialogForPayOnOff.rightBtnText
            }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { inject } from "vue";
import { FormInstance } from "element-plus";
import FormList from "@/components/FormList/index.vue";
import comTable from "@/components/comTable/comTable.vue";
import { list, amount_stat as stat, amount_change } from "@/api/other/merchant";

const getFormatDate = inject("getFormatDate");
const searchForm = ref({});
const initSearchForm = ref({
  // 表单标签位置
  // labelPosition: "right",
  formAttrs: {
    // 是否内联
    inline: true,
  },
  rowAttrs: {
    // 行内表单数量
    columnsNum: 4,
  },
  // 初始化表单字段
  initKeys: [
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "id",
      // 表单属性
      formAttrs: {
        label: "商户UID",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入商户UID",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "mer_name",
      // 表单属性
      formAttrs: {
        label: "商户名称",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入商户名称",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "range-inputs",
      // 唯一标识
      key: "min_amount_max_amount",
      // 表单属性
      formAttrs: {
        label: "金额范围",
      },
      // 控制属性
      controlAttrs: {
        value: [null, null],
        attrs: [
          {
            // 提示文本
            placeholder: "请输入最小值",
            // 是否可清空
            clearable: true,
            controlsPosition: "right",
            min: 0,
          },
          {
            // 提示文本
            placeholder: "请输入最大值",
            // 是否可清空
            clearable: true,
            controlsPosition: "right",
            min: 0,
          },
        ],
      },
      // 控制事件
      // controlOn: {},
    },
    {
      // 类型
      type: "buttons",
      // 按钮
      btns: [
        {
          // 文本
          text: "搜索",
          // 控制属性
          controlAttrs: {
            // 类型
            type: "primary",
            icon: "search",
          },
          // 控制事件
          controlOn: {
            // 点击
            click: (e: Event, formRef: FormInstance, data: Array<object>) => {
              formRef.validate((valid) => {
                if (valid) {
                  console.log("fields", data);
                  tableDatasObj.value.paging.page = 1;

                  let tempData = { ...data };

                  tempData.min_amount = data.min_amount_max_amount[0];
                  tempData.max_amount = data.min_amount_max_amount[1];

                  delete tempData.min_amount_max_amount;

                  tableDatasObj.value.queryParams = tempData;

                  handleQuery(tableDatasObj.value.paging);
                }
              });
            },
          },
        },
        {
          // 文本
          text: "重置",
          // 控制属性
          controlAttrs: {
            icon: "refresh",
          },
          // 控制事件
          controlOn: {
            // 点击
            click: resetQuery,
          },
        },
      ],
    },
  ],
});

/** 重置查询 */
function resetQuery(e: Event, formRef: FormInstance, data: Array<object>) {
  // 重置表单
  formRef.resetFields();
  // 查询
  tableDatasObj.value.paging.page = 1;
  tableDatasObj.value.paging.limit = 20;
  tableDatasObj.value.queryParams = { ...searchForm.value };
  const params = {
    ...tableDatasObj.value.queryParams,
    ...data,
    ...tableDatasObj.value.paging,
  };

  handleQuery(params);
}

// 表*********************************************
const loading = ref(false);

const tableDatasObj = ref({
  list: [],
  paging: {
    limit: 20,
    page: 1,
    total: 0,
  },
});
const tableDatasCom = computed(() => {
  return tableDatasObj.value.list.map((item) => {
    return {
      ...item,
      status_com: item.status + "" === "1" ? "正常" : "禁用",
      createtime_com: getFormatDate(item.createtime),
      last_login_time_com: item.last_login_time
        ? getFormatDate(item.last_login_time)
        : "无",
    };
  });
});
const tableconfig = {
  // tableHeight: 480, //表格高度
  isSelection: false, //显示复选框
  isRowClick: false, //使用行点击
  isStripe: true, //隐藏斑马纹，与背景色不可同时用
  isShowSummary: false, //显示共计
  isIndex: true, //自定义序号
  isNeedPagination: true, //是否需要分页
};
const tableHeader = [
  { label: "商户UID", prop: "id", width: 200 },
  { label: "商户名", prop: "mer_name", width: 200 },
  { label: "可用余额", prop: "usable_amount", width: 200 },
  { label: "冻结余额", prop: "frozen_amount", width: 200 },
  { label: "状态", prop: "status_com", type: "tag" },
  { label: "创建时间", prop: "createtime_com", width: 200 },
  { label: "最后在线时间", prop: "last_login_time_com", width: 200 },
  {
    label: "操作",
    isSort: false,
    prop: "operation",
    columnAttrs: {
      // fixed: "right",
      // width: '400',
    },
    children: [
      {
        type: "button",
        btnText: "查看明细",
        title: "details",
      },
      {
        type: "button",
        btnText: "增减余额",
        title: "pay-on-off",
      },
    ],
  },
];

/**
 * 查询
 */
function handleQuery(paging: { page: number; limit: number }) {
  loading.value = true;
  list({ ...tableDatasObj.value.paging, ...tableDatasObj.value.queryParams })
    .then((res) => {
      tableDatasObj.value.list = res.list;
      tableDatasObj.value.paging.total = res.total;
    })
    .finally(() => {
      loading.value = false;
    });
  // if (tableDatasObj.paging.typeCode) {
  // loading.value = true;
  // getDictPage(queryParams)
  //   .then(({ data }) => {
  //     dictList.value = data.list;
  //     total.value = data.total;
  //   })
  //   .finally(() => (loading.value = false));
  // }
}
// 完*********************************************

// 统计
const statInfo = ref({});
const total_amountCom = computed(() => {
  return (
    (parseFloat(statInfo.value.total_usable_amount) * 100 +
      parseFloat(statInfo.value.total_frozen_amount) * 100) /
    100
  );
});
function loadstat() {
  loading.value = true;
  stat()
    .then((res) => {
      statInfo.value = res;
    })
    .finally(() => (loading.value = false));
}

loadstat();
// 完*********************************************

const initDialogForm = ref({
  // 表单标签位置
  formAttrs: {
    // 是否内联
    // inline: true,
    labelPosition: "top",
  },
  rowAttrs: {
    // 行内表单数量
    columnsNum: 1,
  },
  // 初始化表单字段
  initKeys: <any>[],
});

const isHasOptions = [
  {
    // 标签
    label: "关闭",
    // 值
    value: 0,
  },
  {
    // 标签
    label: "开启",
    // 值
    value: 1,
  },
];

function handleTableBtnClick(row: object, title: string) {
  dialog.type = title;
  dialog.singData = row;

  if (title === "add") {
    dialog.visible = true;
    dialog.title = "添加用户";
    dialog.leftBtnText = "确 定";
    dialog.rightBtnText = "取 消";

    initDialogForm.value.initKeys.splice(0);
    initDialogForm.value.initKeys.push(
      ...[
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "name",
          // 表单属性
          formAttrs: {
            label: "商户户名",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            placeholder: "请输入商户户名",
            // 是否可清空
            clearable: true,
          },
          // 控制事件
          controlOn: {},
        },
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "pwd",
          // 表单属性
          formAttrs: {
            label: "登陆密码",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            placeholder: "请输入登陆密码",
            // 是否可清空
            clearable: true,
          },
          // 控制事件
          controlOn: {},
        },
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "type",
          // 表单属性
          formAttrs: {
            label: "商户类型",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            placeholder: "请选择商户类型",
            // 是否可清空
            clearable: true,
          },
          // 选项
          options: [
            {
              label: "普通商户",
              value: 1,
            },
            {
              label: "代理商户",
              value: 2,
            },
          ],
          // 控制事件
          controlOn: {},
        },
      ]
    );
  } else if (title === "groud-send") {
  } else if (title === "unbind-all") {
    ElMessageBox.confirm("确认一键解绑所有商户TG？", "信息", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      // 访问接口；刷新列表
    });
  } else if (title === "key") {
    // 新增支付产品
    dialog.title = "敏感操作，请验证安全码";
    dialog.leftBtnText = "确 定";
    dialog.rightBtnText = "取 消";

    initDialogForm.value.initKeys.push(
      ...[
        // 产品名称
        // 通道代码
        // 通道显示
        // 状态
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "qqq5",
          // 表单属性
          formAttrs: {
            label: "产品名称",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            placeholder: "请输入产品名称",
            // 是否可清空
            clearable: true,
          },
          // 控制事件
          controlOn: {},
        },
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "qqq5",
          // 表单属性
          formAttrs: {
            label: "通道代码",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            placeholder: "请输入通道代码",
            // 是否可清空
            clearable: true,
          },
          // 控制事件
          controlOn: {},
        },
        {
          // 类型
          type: "switch",
          // 唯一标识
          key: "qqq5",
          // 表单属性
          formAttrs: {
            label: "通道显示",
          },
          // 控制属性
          controlAttrs: {
            value: false,
          },
          // 控制事件
          controlOn: {},
        },
        {
          // 类型
          type: "switch",
          // 唯一标识
          key: "qqq5",
          // 表单属性
          formAttrs: {
            label: "状态",
          },
          // 控制属性
          controlAttrs: {
            value: false,
          },
          // 控制事件
          controlOn: {},
        },
      ]
    );
  } else if (title === "pay-on-off") {
    // 增减余额
    dialog.visible = true;
    dialog.title = "增减余额";
    dialog.leftBtnText = "确 定";
    dialog.rightBtnText = "取 消";

    initDialogForm.value.initKeys.push(
      ...[
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "mer_name",
          // 表单属性
          formAttrs: {
            label: "商户名称",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            // placeholder: "用户名/昵称/手机user_name号",
            // 是否可清空
            clearable: true,
            readonly: true,
          },
          value: dialog.singData["mer_name"],
          // 控制事件
          controlOn: {},
        },
        {
          // 类型
          type: "select",
          // 唯一标识
          key: "handle_type",
          // 表单属性
          formAttrs: {
            label: "操作类型",
          },
          // 控制属性
          controlAttrs: {
            placeholder: "请选择操作类型",
            value: 2,
          },
          // 选项
          options: [
            {
              label: "增加",
              value: 2,
            },
            {
              label: "减少",
              value: 1,
            },
          ],
        },
        {
          // 类型
          type: "select",
          // 唯一标识
          key: "capital_type",
          // 表单属性
          formAttrs: {
            label: "资金类型",
          },
          // 控制属性
          controlAttrs: {
            placeholder: "请选择资金类型",
            value: 1,
          },
          // 选项
          options: [
            {
              label: "可用余额",
              value: 1,
            },
            {
              label: "冻结余额",
              value: 2,
            },
          ],
        },
        {
          // 类型
          type: "select",
          // 唯一标识
          key: "reason",
          // 表单属性
          formAttrs: {
            label: "原因",
          },
          // 控制属性
          controlAttrs: {
            placeholder: "请选择原因",
          },
          // 选项
          options: [
            {
              label: "充值上分",
              value: 1,
            },
            {
              label: "调整余额",
              value: 2,
            },
            {
              label: "冲正",
              value: 3,
            },
            {
              label: "补单",
              value: 4,
            },
          ],
        },
        {
          // 类型
          type: "input-number",
          // 唯一标识
          key: "amount",
          // 表单属性
          formAttrs: {
            label: "金额",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            placeholder: "请填写金额",
            // 是否可清空
            clearable: true,
          },
          // 控制事件
          controlOn: {},
        },
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "remark",
          // 表单属性
          formAttrs: {
            label: "备注",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            placeholder: "请填写备注",
            // 是否可清空
            clearable: true,
            type: "textarea",
          },
          // 控制事件
          controlOn: {},
        },
      ]
    );
  } else if (title === "rate") {
    // 调整费率
    dialog.title = "调整费率";
    dialog.leftBtnText = "上 调";
    dialog.rightBtnText = "下 调";
    initDialogForm.value.initKeys.push(
      ...[
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "rate",
          // 表单属性
          formAttrs: {
            // label: "自定义引导语",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            placeholder: "请输入需要调整的费率",
            // 是否可清空
            clearable: true,
          },
          appendTxt: "%",
          // 控制事件
          controlOn: {},
        },
      ]
    );
  } else if (title === "agency-rate") {
    // 设置费率
    dialog.title = "调整码商费率（统一按照百分比计算）";
    dialog.leftBtnText = "确 定";
    dialog.rightBtnText = "取 消";
    initDialogForm.value.initKeys.push(
      ...[
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "rate",
          // 表单属性
          formAttrs: {
            label: "自定义引导语",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            placeholder: "请输入需要设置的费率",
            // 是否可清空
            clearable: true,
          },
          appendTxt: "%",
          // 控制事件
          controlOn: {},
        },
      ]
    );
  } else if (title === "tg") {
    // 设置费率
    dialog.title = "调整码商费率（统一按照百分比计算）";
    dialog.leftBtnText = "确 定";
    dialog.rightBtnText = "取 消";
    initDialogForm.value.initKeys.push(
      ...[
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "rate",
          // 表单属性
          formAttrs: {
            label: "自定义引导语",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            placeholder: "请输入需要设置的费率",
            // 是否可清空
            clearable: true,
          },
          appendTxt: "%",
          // 控制事件
          controlOn: {},
        },
      ]
    );
  } else if (title === "unbind-tg") {
    // 设置费率
    dialog.title = "调整码商费率（统一按照百分比计算）";
    dialog.leftBtnText = "确 定";
    dialog.rightBtnText = "取 消";
    initDialogForm.value.initKeys.push(
      ...[
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "rate",
          // 表单属性
          formAttrs: {
            label: "自定义引导语",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            placeholder: "请输入需要设置的费率",
            // 是否可清空
            clearable: true,
          },
          appendTxt: "%",
          // 控制事件
          controlOn: {},
        },
      ]
    );
  } else if (title === "edit") {
    // 设置费率
    dialog.title = "调整码商费率（统一按照百分比计算）";
    dialog.leftBtnText = "确 定";
    dialog.rightBtnText = "取 消";
    initDialogForm.value.initKeys.push(
      ...[
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "rate",
          // 表单属性
          formAttrs: {
            label: "自定义引导语",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            placeholder: "请输入需要设置的费率",
            // 是否可清空
            clearable: true,
          },
          appendTxt: "%",
          // 控制事件
          controlOn: {},
        },
      ]
    );
  } else if (title === "del") {
    // 设置费率
    dialog.title = "调整码商费率（统一按照百分比计算）";
    dialog.leftBtnText = "确 定";
    dialog.rightBtnText = "取 消";
    initDialogForm.value.initKeys.push(
      ...[
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "rate",
          // 表单属性
          formAttrs: {
            label: "自定义引导语",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            placeholder: "请输入需要设置的费率",
            // 是否可清空
            clearable: true,
          },
          appendTxt: "%",
          // 控制事件
          controlOn: {},
        },
      ]
    );
  } else if (title === "clearing-rate") {
    dialog.visible = false;

    ElMessageBox.confirm("确定要将所有码商费率清0吗？", "将所有码商费率清0", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      // 访问接口；刷新列表
    });
  } else if (title === "details") {
    // 查看明细
    dialog.visible = false;

    dialogForPayOnOff.visible = true;
    dialogForPayOnOff.id = row.id;
    dialogForPayOnOff.title = "账户明细";
    dialogForPayOnOff.leftBtnText = "确 定";
    dialogForPayOnOff.rightBtnText = "取 消";
  }
}

// 弹窗对象
const dialog = reactive({
  visible: false,
  type: "user-form",
  width: 450,
  title: "",
  leftBtnText: "确 定",
  rightBtnText: "取 消",
  singData: {},
});
// const dialogBak = { ...dialog };
const dialogForPayOnOff = reactive({
  visible: false,
  type: "user-form",
  width: 1200,
  title: "",
  // leftBtnText: "确 定",
  rightBtnText: "取 消",
  singleData: {},
  closeDialog() {
    dialogForPayOnOff.visible = false;
  },
  handleLeftClick() { },
  handleRightClick() {
    dialogForPayOnOff.closeDialog();
  },
});

let formDialogId = ref<FormInstance>();

/**
 * 关闭弹窗
 *
 * @param type 弹窗类型  用户表单：user-form | 用户导入：user-import
 */
function closeDialog() {
  dialog.visible = false;
}
function closedDialog() {
  // formDialogId.value?.resetFields();
  // formDialogId.value?.clearValidate();
  formDialogId.value = {};
  formDialogModel.value = {};
  initDialogForm.value.initKeys.splice(0);

  // Object.keys(dialogBak).map((key) => {
  //   dialog[key] = dialogBak[key];
  // });

  // initDialogForm.value = cloneDeep(initDialogFormBak);
}

let formDialogModel = ref({});
function handleLeftClick() {
  // formDialogId.

  // if (dialog.type === "add") {
  if (dialog.type === "pay-on-off") {
    formDialogId.value.validate((valid, fields) => {
      if (valid) {
        let params = { ...formDialogModel.value, mer_id: dialog.singData.id, source: 2 };

        amount_change(params).then((res) => {
          ElMessage.success("修改成功");
          closeDialog();
          handleQuery();
        });
      } else {
        console.log("error submit!", fields);
      }
    });
  }

  closeDialog();
}
function handleRightClick() {
  // formDialogId.
  closeDialog();
}

onMounted(() => {
  tableDatasObj.value.queryParams = { ...searchForm.value };

  handleQuery(tableDatasObj.value.paging);
});
</script>

<style lang="scss" scoped>
.info-container {
  font-size: var(--el-font-size-extra-small);

  span {
    background-color: #1e9fff;
    display: inline-block;
    padding: 0 10px;
    margin: 0 5px;
    color: #fff;
  }
}
</style>
